<template>
  <div class=" search_result_page" v-customLoading="loadMore" >
    <div class="search_header">
      <div class="search_contain">
        <div class="logo">
          <div class="logo_img">
            <img src="./images/logo.png" alt />
          </div>
          <p>搜数</p>
            <div class="search_input">
              <el-input
                class="searchInput"
                id="searchInput"
                @focus="getBlur = true"
                v-model="hotKey"
                placeholder="请输入内容"
                size="small"
                @keyup.enter.native="upDataHotKey"
              ></el-input>
              <el-button id="searchBtn" @click.stop.prevent="upDataHotKey" type="primary" size="mini" @keyup.enter.native="upDataHotKey">检 &nbsp;索</el-button>
              <div
                class="search_hot"
                v-if="showHot && hotWordList.length"
                @mouseenter="getBlur = true"
                @mouseleave="getBlur = false"
              >
                <p
                  v-for="(item,index) in hotWordList"
                  @click.stop.prevent="getCheckWord(item)"
                  :key="index"
                >{{item.title}}</p>
              </div>
            </div>
        </div>
     
      </div>
      <div class="login_btn">
        <p @click.stop.prevent="getLogin" v-if="!userName">登录</p>
        <!-- <p v-if="userName">
          当前用户：
          <span>{{userName}}</span>
        </p>
        <p v-if="userName" @click.stop.prevent="loginOut" class="goout">退出</p> -->
        <p class="gohome" @click.stop.prevent="goHome" >回到主页</p>
      </div>
    </div>
    <div class="search_container">
      <div class="searchNav">
        <p :class="showContainer.all?'check':''" @click.stop.prevent="currentData('all')">全部</p>
        <p :class="showContainer.micro?'check':''" @click.stop.prevent="currentData('micro')">基层数据</p>
        <p :class="showContainer.macro?'check':''" @click.stop.prevent="currentData('macro')">综合数据</p>
      </div>
      <div class="all dataContain"  v-customLoading="loadAll" v-if="showContainer.all" >
        <div class="search_result" v-if="searchDataList.length">
          <div class="microData" v-for="(n,i) in searchDataList" :key="i">
            <div class="leftBar" v-if="n.data.length">
              <div class="icon"></div>
              <p class="dataName dataTitle">{{n.name}}</p>
            </div>
            <div class="microTableContainer">
              <div class="microTableItem" v-for="(tabData,j) in n.data" :key="j">
                
                <el-table :data="tabData.dataList" size="mini" v-loading>
                  <el-table-column
                    align="center"
                    show-overflow-tooltip
                    v-for="(item,index) in tabData.tableBar"
                    :key="index"
                    :property="item.key"
                    :label="item.value"
                    width="150"
                  ></el-table-column>
                </el-table>
                <p class="dataName">
                  从
                  <span>{{tabData.name}}</span>查到相关结果
                  <span>{{tabData.total}}</span>条
                </p>
                <div class="operation">
                  <p class="dataName" @click.stop.prevent="getAllTable(tabData)">查看全部</p>
                  <!-- <p class="dataName">数据下载</p>
                  <p class="dataName viewOnMap">在地图上查看</p> -->
                </div>
              </div>
            </div>
          </div>
        </div>
        <p v-if="!searchDataList.length">暂无数据</p>
      </div>
      <!-- 基层 -->
      <div class="micro dataContain" v-if="showContainer.micro" v-customLoading="loadMicro" @click.stop.prevent="drawer=false">
        <div class="drawer_btn">
          <div class="search_drawer" v-show="drawer">
            <div class="tree-box">
              <div class="zTreeDemoBackground left">
                <ul id="treeDemo" class="ztree" @click="stopCt($event)"></ul>
              </div>
            </div>
            <!-- <el-tree class="mircoTree"  show-checkbox ref="rootTree" node-key="idenName" :data="searchTreeList"  :props="defaultProps" @check="handleCheckChange" :load="handleNodeClick" lazy accordion></el-tree> -->
          </div>
          <!-- <p  @click.prevent.stop="highSearch">高级搜索条件</p> -->
        </div>
        <div class="search_result">
          <div class="microData">
            <div class="leftBar" style="padding-left:60px;">
              <div class="leftBarNav">
                <p
                  v-for="(item,index) in microRecportType"
                  :class="[item.index == microCurrentRecportType?'currentRecport':'']"
                  :key="index"
                  @click.prevent.stop="searchMicroData(item)"
                >{{item.name}}</p>
              </div>
            </div>
            <div class="microTableContainer" style="padding-left:60px;">
              <div class="microTableItem" v-for="(tabData,j) in currentMicroData" :key="j">
                
                <el-table :data="tabData.dataList" size="mini" style="width: 100%" v-loading>
                  <el-table-column
                    align="center"
                    show-overflow-tooltip
                    v-for="(item,index) in tabData.tableBar"
                    :key="index"
                    :property="item.key"
                    :label="item.value"
                    width="150"
                  ></el-table-column>
                </el-table>
                <p class="dataName">
                  从
                  <span>{{tabData.name}}</span>查到相关结果
                  <span>{{tabData.total}}</span>条
                </p>
                <div class="operation">
                  <p class="dataName" @click.stop.prevent="getAllTable(tabData)">查看全部</p>
                  <!-- <p class="dataName">数据下载</p>
                  <p class="dataName viewOnMap">在地图上查看</p> -->
                </div>
              </div>
              <p v-if="!currentMicroData.length">暂无数据</p>
            </div>
          </div>
        </div>
      </div>
      <!-- 综合 -->
      <div class="macro dataContain" v-if="showContainer.macro">
        <div class="search_result">
          <div class="microData">
            <div class="leftBar">
              <div class="leftBarNav">
                <p
                  v-for="(item,index) in macroRecportType"
                  :class="[item.index == currentRecportType?'currentRecport':'']"
                  :key="index"
                  @click.stop.prevent="searchMacroData(item)"
                >{{item.name}}</p>
              </div>
            </div>
            <div class="microTableContainer"  v-customLoading="loadMacro">
              <div class="microTableItem" v-for="(tabData,j) in currentMacroData" :key="j">
                <el-table :data="tabData.dataList" size="mini" style="width: 100%">
                  <el-table-column
                    align="center"
                    show-overflow-tooltip
                    v-for="(item,index) in tabData.tableBar"
                    :key="index"
                    :property="item.key"
                    :label="item.value"
                    width="150"
                  ></el-table-column>
                </el-table>
                <p class="dataName">
                  从
                  <span>{{tabData.name}}</span>查到相关结果
                  <span>{{tabData.total}}</span>条
                </p>
                <div class="operation">
                  <p class="dataName" @click.stop.prevent="getAllTable(tabData)">查看全部</p>
                  <!-- <p class="dataName">数据下载</p>
                  <p class="dataName viewOnMap">在地图上查看</p> -->
                </div>
              </div>
              <p v-if="!currentMacroData.length">暂无数据</p>
            </div>
          </div>
        </div>
      </div>
    </div>

    <el-dialog :visible.sync="dialogTableVisible" custom-class="viewAllDialog" @close="closeALLTable">
      <el-table :data="allDatas.dataList" size="mini" class="openDialog" height="400" v-loading>
        <el-table-column
          v-for="(val,key,i) in allDatas.tableBar"
          :key="i"
          :property="key"
          :label="val"
          width="150"
          align="center"
          show-overflow-tooltip
        ></el-table-column>
      </el-table>
      <el-pagination
        size="mini"
        class="dataPage"
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[10,50,100,200,300]"
        :page-size="size"
        :pager-count=5
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        popper-class="paginationSelectBox"
      ></el-pagination>
    </el-dialog>

  </div>
</template>

<script>
//  import 'static/config/app-config.js';
/* eslint-disable linebreak-style,semi,linebreak-style,linebreak-style */
import * as searchAPI from "@/pages/search/api/search.js";
//zTree组件
import '../../../../static/tree/jquery.ztree.core.js';
import '../../../../static/tree/jquery.ztree.excheck.js';
import '../../../../static/tree/jquery.ztree.exedit.js';
export default {
  data() {
    return {
      dataNav: [
        { name: "全部", ischeck: true, type: "all" },
        { name: "基层数据", ischeck: false, type: "micro" },
        { name: "综合数据", ischeck: false, type: "macro" }
      ],
      loadAll:false,//加载所有数据的loading开关
      loadMicro:false,//加载基层数据loading开关
      loadMacro:false,//加载综合数据loading开关
      loadMore:false,//加载查看数据loading开关
      showContainer: {
        all: true,
        micro: false,
        macro: false
      },
      drawer:false,
      direction:'ltr',
      //当前选中的综合报告期
      currentRecportType: "",
      macroRecportType: [],
      searchDataList: [],
      microDataList: [],
      macroDataList: [],
      currentMicroData: [],
      currentMacroData: [],
      userName: "",
      getBlur: false,
      hotWordList: [],
      firstSearchData: [],
      searchData: [],
      screenData: [],
      showHot: false,
      allDatas: {
        total: 0,
        type: "",
        tableBar: [],
        dataList: []
      },
      currentDataList: [],
      dialogTableVisible: false,
      hotKey: this.$route.params.key ? this.$route.params.key : "",
      currentPage: 1,
      size: 10,
      total: 0,
      idenName:[],
      idenCodes:[],
      microRecportType:[],
      microCurrentRecportType:'',
      searchTreeList:[],
      defaultProps: {
        children: 'children',
        label: 'idenName'
      },
      gid:'',
      mid:'',
      report:{},
      firstId:'',
      checkStrictly:true,
      cardName:'all',
      setting:{
        data:{
          simpleData: {
            enable: true,
            idKey: "id",
            pIdKey: "pId",
            rootPId: 0
          }
        },
        check: {
          enable: true,     //这里设置是否显示复选框
          chkboxType: { "Y": "ps", "N": "ps" }      //设置复选框是否与 父/子 级相关联
        },
        view:{
          dblClickExpand: false,
          showLine:false,
          showIcon:false,
          fontCss:{
            color:'#ffffff',
            background:'none',
            border:'none'
          },
        },
        callback:{
          onExpand:this.clickTreeNode,
          onClick:this.clickTreeNode,
          onCheck: this.zTreeOnCheck,         //点击复选框相关回调（回调名称固定）
        }
      },
      zNodes:[],
      microSearchList:[],
      treeIdent:[]
    };
  },
  watch: {
    hotKey(now, old) {
      this.showHot = true
      if (!now||now=="") {
        this.getHotWord();
      } else {
        let req = {
          keyword: now,
          mitmid: -1
        };
        searchAPI
          .getTips(req)
          .then(res => {
            if (res.message == "success" && res.data) {
              this.hotWordList = res.data;
            }
          })
          .catch(error => {
            console.log(error);
          });
      }
    },
    getBlur(now, old) {
      if (now) {
        this.showHot = true;
      } else if (!now) {
        this.showHot = false;
      }
    }
  },
  created() {
    if (this.hotKey) {
      this.getTipsItem();
    }
    let user = JSON.parse(JSON.parse(localStorage.getItem("userInfo")).data)
      .sysUser.username;
    this.userName = user;
    this.getMacroRecportType();
    this.getMicroRecportType()
  },
  mounted(){
    $.fn.zTree.init($("#treeDemo"), this.setting, this.zNodes);
  },
  methods: {
    stopCt(event){
      event.stopPropagation()
    },
    closeALLTable(){
      this.currentPage = 1
    },
    //选中指标
    zTreeOnCheck(event, treeId, treeNode){
      event.stopPropagation();
      let microSearchList = []
      let arrItem = {}
      let treeObj = $.fn.zTree.getZTreeObj("treeDemo");
      let nodeList = treeObj.getCheckedNodes(true)
      this.microSearchList =[]
      if(nodeList.length){
        nodeList.map((item,i)=>{
          if(!item.getCheckStatus().half){
            let parNode = item.getParentNode()
            if(item.level>1 && item.getParentNode().getCheckStatus().half){       
              let obj = {}
              obj.codes = []
              parNode.children.map(ite=>{
                if(ite.checked && !ite.getCheckStatus().half){
                  obj.identid = ite.level == 1?ite.identid:ite.mid
                  obj.isAll = false
                  obj.parcode = ite.level == 1?'root':ite.parcode
                  obj.vid = ite.level == 1?ite.id:ite.vid
                  obj.isIndustryCategory = obj.identid=="35fc2dc5e3f74a62a2bb6259716cc6fc"?true:false
                  if(ite.checked){
                    obj.codes.push(ite.code?ite.code:"")
                  }
                }
              })
              microSearchList.push(obj)
            }else{
                let obj = {}
                let code = item.level == 1?" ":parNode.code
                obj.codes = [code]
                obj.identid = item.level == 1?item.identid:parNode.mid
                obj.isAll = item.level == 1?true:false
                obj.parcode = item.level == 1?'root':parNode.parcode
                obj.vid = item.level == 1?item.id:parNode.vid
                obj.isIndustryCategory = obj.identid=="35fc2dc5e3f74a62a2bb6259716cc6fc"?true:false
                if(obj.parcode){
                  microSearchList.push(obj)
                }
            }
          }
        })
      }
      if(microSearchList.length>0){
        for(var i=0; i<microSearchList.length; i++){
          for(var j=i+1; j<microSearchList.length; j++){
            if((microSearchList[i].parcode == microSearchList[j].parcode)&&(microSearchList[i].vid == microSearchList[j].vid)){
              microSearchList.splice(j,1);
              j--;
            }
          }
        }
      }
      let indentObj = {}
      this.treeIdent.map((item,i)=>{
        indentObj[item.idenId]=[]
      })
      let indentArr = []
      if(microSearchList.length>0){
        for(var i=0; i<microSearchList.length; i++){
          indentObj[microSearchList[i].identid].push(microSearchList[i])
        }
      }
      this.treeIdent.map((ite,i)=>{
        if(indentObj[ite.idenId].length){
          this.microSearchList.push(indentObj[ite.idenId])
        }
      })
      if(this.microSearchList.length){
        this.currentMicroData =[]
        for (let i = 0; i < this.microDataList.length; i++) {
          let req = {microSearchList:this.microSearchList.length?JSON.stringify(this.microSearchList):"",key:this.hotKey,size: 6,current: 1,mitmid:this.microDataList[i].id}
            searchAPI
            .searchQueryKey(req, this.microDataList[i].id, "micro")
            .then(response => {
              if (response.data.list.length) {
                let list = []
                let arr = [];
                for (let j = 0; j < response.data.list.length; j++) {
                  arr.push(response.data.list[j].micro);
                }
                let headTab = JSON.parse(response.data.list[0].idenmeta);
                let headArr = [];
                let headCount = 5;
                Object.keys(headTab).forEach(function(key) {
                  if (headCount > 0) {
                    headArr.push({ key: key, value: headTab[key] });
                    headCount--;
                  }
                });
                this.currentMicroData.push({
                  name:this.microDataList[i].name,
                  total: response.data.totalCount,
                  type: response.data.list[0].type,
                  tableBar: headArr,
                  dataList: arr,
                  id: this.microDataList[i].id
                });
                this.loadMicro = false;
              }else{
                this.loadMicro = false;
              }
            })
            .catch(error => {
              console.log(error);
            }); 
        }
      }else if(!this.idenName.length){
        this.size = 10
        this.getTipsItem()
      }
    },
    clickTreeNode(event, treeId, treeNode){
      event.stopPropagation();
      let zTree = $.fn.zTree.getZTreeObj("treeDemo");  
      zTree.expandNode(treeNode);  
      if(treeNode.level == 0){
        this.getMid(treeNode)
      }else{
        this.getChildInden(treeNode)
      }
    },
    //获取版本号
    getMid(treeNode){
      let req = {gid:treeNode.id}
      let treeObj = $.fn.zTree.getZTreeObj("treeDemo");
      let parentZNode = treeObj.getNodeByParam("id", treeNode.id, null);//获取指定父节点
      let childNodes = treeObj.transformToArray(treeNode);//获取子节点集合
      treeNode.children = [];
      searchAPI
        .microGroupVersion(req,treeNode.id)
        .then(res => {
          if (res.message == "success" && res.data.length) {
            let childrenData = res.data
            childrenData.map(item=>{
              item.name = item.value
              item.pid = item.identid
              item.isParent = true
            })
            treeObj.refresh();
            treeObj.addNodes(parentZNode,childrenData, false);    //添加节点
          }else{
            node.loaded = true
            node.loading = false
          }
        })
        .catch(error => {
          console.log(error);
        }); 
    },
    //获取枚举值
    getChildInden(treeNode){
      let treeObj = $.fn.zTree.getZTreeObj("treeDemo");
      let parentZNode = treeObj.getNodeByParam("id", treeNode.id, null);//获取指定父节点
      let childNodes = treeObj.transformToArray(treeNode);//获取子节点集合
      if(!treeNode.children){
        let req = {
          mid:treeNode.identid,
          vid:treeNode.id
        }
        if(treeNode.level > 1){
          req.mid = treeNode.mid?treeNode.mid:treeNode.getParentNode().mid
          req.vid = treeNode.vid
          req.parcode = treeNode.code
        }
        let treeObj = $.fn.zTree.getZTreeObj("treeDemo");
        let parentZNode = treeObj.getNodeByParam("id", treeNode.id, null);//获取指定父节点
        let childNodes = treeObj.transformToArray(treeNode);//获取子节点集合
        treeNode.children = [];
        searchAPI
          .microIdentValue(req)
          .then(res => {
            if (res.message == "success" && res.data.length) {
              let childrenData = res.data
              childrenData.map(item=>{
                item.pid = item.identid
                item.isParent = true
              })
              treeObj.addNodes(parentZNode,childrenData, false);    //添加节点
              
            }else{
              node.loaded = true
              node.loading = false
            }
            if(treeNode.checked && !treeNode.getCheckStatus.half){
              if(treeNode.children.length){
                treeNode.children.map(item=>{
                  item.checked = true
                })
              }
            }
            treeObj.refresh();
          })
          .catch(error => {
            console.log(error);
          }); 
      }
    },
    highSearch(){
      this.drawer = !this.drawer
      
    },
    microSearchTree(){
      searchAPI
        .microSearchTree()
        .then(res => {
          if (res.message == "success" && res.data.length) {
            this.zNodes = []
            this.treeIdent = res.data
            res.data.map((item,i)=>{
              let obj = {}
              obj.name = item.idenName
              obj.id = item.idenId
              obj.pId = item.idenId
              obj.isParent = true
              obj.nocheck = true
              this.zNodes.push(obj)   
              $.fn.zTree.init($("#treeDemo"), this.setting, this.zNodes); 
              $.fn.zTree.getZTreeObj("treeDemo").refresh();
            })
          }
        })
        .catch(error => {
          console.log(error);
        });
    },
    //版本号查询
    microGroupVersion(item){
      let req = {gid:item.idenId}
      searchAPI
        .microGroupVersion(req,item.idenId)
        .then(res => {
          if (res.message == "success" && res.data.length) {
            let data = res.data
            this.searchTreeList[item.id].children = []
            data.map((ite,i)=>{
              ite.id = i
              ite.idenName = ite.value
              this.searchTreeList[item.id].children.push(ite)
            })
          }
        })
        .catch(error => {
          console.log(error);
        });
    },
    getShowHot() {
      this.showHot = true;
    },
    hiddenHot() {},
    getHotWord() {
      searchAPI
        .getHotWord()
        .then(res => {
          if (res.message == "success" && res.data.length) {
            this.hotWordList = res.data;
          }
        })
        .catch(error => {
          console.log(error);
        });
    },
    handleSizeChange(val) {
      this.size = val;
      this.getAllTable(this.currentDataList);
    },
    handleCurrentChange(val) {
      this.currentPage = val;
      this.getAllTable(this.currentDataList);
    },
    currentData(data) {
      if (data == "all") {
        this.showContainer.all = true;
        this.showContainer.micro = false;
        this.showContainer.macro = false;
        this.getTipsItem()
      } else if (data == "micro") {
        this.showContainer.all = false;
        this.showContainer.micro = true;
        this.showContainer.macro = false;
        this.loadMicro = false;
        this.getTipsItemMicro()
      } else {
        this.showContainer.all = false;
        this.showContainer.micro = false;
        this.showContainer.macro = true;
        this.getTipsItemMacro()
      }
      this.cardName = data
    },
    getTipsItem() {
      this.loadAll = true;
      this.searchDataList = [];
      this.microDataList = [];
      this.macroDataList = [];
      this.currentMacroData = [];
      this.currentMicroData = [];
      searchAPI
        .searchAllItems()
        .then(res => {
          for (let i = 0; i < res.length; i++) {
            let req = {
              key: this.hotKey,
              mitmid: res[i].id,
              microSearchList :"",
              current: 1,
              size: 6
            };
            if (res[i].catalog == "micro" ) {
              searchAPI
                .searchQueryKey(req, res[i].id, res[i].catalog)
                .then(response => {
                  if (response.data.list.length) {
                      let arr = [];
                      for (let j = 0; j < response.data.list.length; j++) {
                        arr.push(response.data.list[j].micro);
                      }
                      let headTab = JSON.parse(response.data.list[0].idenmeta);
                      let headArr = [];
                      let headCount = 5;
                      Object.keys(headTab).forEach(function(key) {
                        if (headCount > 0) {
                          headArr.push({ key: key, value: headTab[key] });
                          headCount--;
                        }
                      });
                      this.microDataList.push({
                        name: res[i].name,
                        total: response.data.totalCount,
                        type: response.data.list[0].type,
                        tableBar: headArr,
                        dataList: arr,
                        id: res[i].id
                      });
                      this.currentMicroData.push({
                        name: res[i].name,
                        total: response.data.totalCount,
                        type: response.data.list[0].type,
                        tableBar: headArr,
                        dataList: arr,
                        id: res[i].id
                      });
                  }
                })
                .catch(error => {
                  console.log(error);
                });
            }
            if(res[i].catalog == "macro"){
                searchAPI
                .searchQueryKeyGet(req, res[i].id, "macro")
                .then(response => {
                  if (response.data.list.length) {                
                      let arr = [];
                      for (let j = 0; j < response.data.list.length; j++) {
                        arr.push(response.data.list[j]);
                      }
                      let headTab = JSON.parse(response.data.list[0].idenmeta);
                      let headArr = [];
                      let headCount = 5;
                      Object.keys(headTab).forEach(function(key) {
                        if (headCount > 0) {
                          headArr.push({ key: key, value: headTab[key] });
                          headCount--;
                        }
                      });
                      this.macroDataList.push({
                        name: res[i].name,
                        total: response.data.totalCount,
                        type: response.data.list[0].type,
                        tableBar: headArr,
                        dataList: arr,
                        id: res[i].id
                      });
                      this.currentMacroData.push({
                        name: res[i].name,
                        total: response.data.totalCount,
                        type: response.data.list[0].type,
                        tableBar: headArr,
                        dataList: arr,
                        id: res[i].id
                      });
                  }
                })
                .catch(error => {
                  console.log(error);
                });
            }
          }
          this.searchDataList.push({
            name: "基层数据",
            data: this.microDataList
          });
          this.searchDataList.push({
            name: "综合数据数据",
            data: this.macroDataList
          });
           this.loadAll = false;
        })
        .catch(error => {
          console.log(error);
        });
    },
    getTipsItemMicro(){
      this.microSearchTree()
      this.currentMicroData = []
      for(let i = 0;i < this.microDataList.length; i++){
        let req = {
          key: this.hotKey,
          mitmid: this.microDataList[i].id,
          microSearchList:this.microSearchList.length?JSON.stringify(this.microSearchList):"",
          current: 1,
          size: 6
        };
        searchAPI
          .searchQueryKey(req, req.mitmid, 'micro')
          .then(response=>{
            if(response.data.list.length){
              let arr = [];
              for (let j = 0; j < response.data.list.length; j++) {
                arr.push(response.data.list[j].micro);
              }
              let headTab = JSON.parse(response.data.list[0].idenmeta);
              let headArr = [];
              let headCount = 5;
              Object.keys(headTab).forEach(function(key) {
                if (headCount > 0) {
                  headArr.push({ key: key, value: headTab[key] });
                  headCount--;
                }
              });
              this.currentMicroData.push({
                name: this.microDataList[i].name,
                total: response.data.totalCount,
                type: response.data.list[0].type,
                tableBar: headArr,
                dataList: arr,
                id: this.microDataList[i].id
              });
            }
          })
      }
    },
    getTipsItemMacro(){
      this.currentMacroData = []
      for(let i = 0;i < this.macroDataList.length; i++){
        let req = {
          key: this.hotKey,
          mitmid: this.macroDataList[i].id,
          current: 1,
          size: 6
        };
        searchAPI
          .searchQueryKeyGet(req, req.mitmid, 'macro')
          .then(response=>{
            if(response.data.list.length){
              let arr = [];
              for (let j = 0; j < response.data.list.length; j++) {
                arr.push(response.data.list[j]);
              }
              let headTab = JSON.parse(response.data.list[0].idenmeta);
              let headArr = [];
              let headCount = 5;
              Object.keys(headTab).forEach(function(key) {
                if (headCount > 0) {
                  headArr.push({ key: key, value: headTab[key] });
                  headCount--;
                }
              });
              this.currentMacroData.push({
                name: this.macroDataList[i].name,
                total: response.data.totalCount,
                type: response.data.list[0].type,
                tableBar: headArr,
                dataList: arr,
                id: this.macroDataList[i].id
              });
            }
          })
      }
    },
    getAllTable(keyWord) {
      // this.loadMore = true;
      this.currentDataList = keyWord;
      let req = {}
      if(this.microSearchList.length){
        req = {
          idenId:this.mid,
          microSearchList:this.microSearchList.length?JSON.stringify(this.microSearchList):"",
          key:this.hotKey,
          size: this.size,
          current: this.currentPage,
          mitmid:keyWord.id}
      }else{
        if(this.report.index){
          req = {
            key: this.hotKey,
            level: keyWord.id,
            aliasName:this.report.aliasName,
            microSearchList:"",
            current: this.currentPage,
            size:this.size,
            reportType: this.report.index == "0" ? "" : this.report.index
          };
        }else{
          req = {
            key: this.hotKey,
            mitmid: keyWord.id,
            microSearchList:"",
            current: this.currentPage,
            size: this.size
          };
        }
      }
      if(keyWord.type == "micro"){
        searchAPI
          .searchQueryKey(req, keyWord.id, keyWord.type)
          .then(response => {
            if(response.message=="success"){
              if(response.data.list.length){
                let arr = [];
                for (let j = 0; j < response.data.list.length; j++) {
                  arr.push(response.data.list[j].micro);
                }
                (this.total = response.data.totalCount),
                (this.allDatas.type = response.data.list[0].type),
                (this.allDatas.tableBar = JSON.parse(response.data.list[0].idenmeta)),
                (this.allDatas.dataList = arr);
                this.dialogTableVisible = true;
              }else{
                this.allDatas.dataList = [];
              }
              
            }else{
              this.allDatas.dataList = [];
              this.$message({
                message: response.message,
                type: "waring"
              });
            }
            this.loadMore = false;
          })
          .catch(error => {
            console.log(error);
            this.loadMore = false;
          });
      }
      if(keyWord.type == "macro"){
        searchAPI
          .searchQueryKeyGet(req, keyWord.id, keyWord.type)
          .then(response => {
            if (response.message=="success") {
              if(response.data.list.length){
                this.allDatas.tableBar = JSON.parse(
                  response.data.list[0].idenmeta
                );
                this.allDatas.dataList = response.data.list;
                this.total = response.data.totalCount;
                this.allDatas.type = response.data.list[0].type;
                this.dialogTableVisible = true;
              }else{
                this.allDatas.dataList = [];
              }
            }else{
              this.allDatas.dataList = [];
              this.$message({
                message: response.message,
                type: "waring"
              });
            }
          this.loadMore = false;
        })
        .catch(error => {
          console.log(error);
          this.loadMore = false;
         });
      }
    },
    upDataHotKey() {
      this.currentRecportType = '0'
      this.microCurrentRecportType = '0'
      this.size = 6
      let req = {
        word: this.hotKey
      };
      searchAPI
        .updateKey(req)
        .then(res => {
          this.showHot = false;
          switch (this.cardName){
            case 'all':
              this.getTipsItem();
            break;
            case 'micro':
              this.getTipsItemMicro();
            break;
            case 'macro':
              this.getTipsItemMacro()
            break;
          }
          
        })
        .catch(error => {
          console.log(error);
        });
    },
    getCheckWord(word) {
      this.hotKey = word.title;
      document.getElementById("searchInput").focus();
    },
    loginOut() {
      this.$confirm("此操作将退出系统, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
        customClass:"loginOutConfirm"
      })
        .then(() => {
          setTimeout(() => {
            this.$message({
              message: "成功退出",
              type: "success"
            });
            // this.$router.push("/login");
            top.location = loginPageUrl;
            localStorage.clear();
          }, 1000);
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消"
          });
        });
    },
    goHome(){
      // this.$router.push("/");
      top.location = homePageUrl;
    },
    getLogin() {
      // this.$router.push("/login");
      top.location = loginPageUrl;
    },
    getMacroRecportType() {
      searchAPI
        .macroRecportType()
        .then(response => {
          if (response.code == "0") {
            this.macroRecportType = response.data;
            this.macroRecportType.splice(0, 0, { name: "全部", index: "0" });
            this.currentRecportType = response.data[0].index;
          }
        })
        .catch(error => {
          console.log(error);
        });
    },
    getMicroRecportType() {
      searchAPI
        .microRecportType()
        .then(response => {
          if (response.code == "0") {
            let data = response.data
            data.map((item,i)=>{
              item.index = `${i+1}`
            })
            this.microRecportType = response.data;
            this.microRecportType.splice(0, 0, { name: "全部", index: "0" });
            this.microCurrentRecportType = response.data[0].index;
          }
        })
        .catch(error => {
          console.log(error);
        });
    },
    searchMacroData(report) {
      this.loadMacro = true;
      this.currentRecportType = report.index;
      this.currentMacroData = [];
      for (let i = 0; i < this.macroDataList.length; i++) {
        let req = {
          key: this.hotKey,
          level: this.macroDataList[i].id,
          current: 1,
          size: 6,
          reportType: report.index == "0" ? "" : report.index
        };
        searchAPI
          .searchQueryKeyGet(req, this.macroDataList[i].id, "macro")
          .then(response => {
            if (response.data.list.length) {
              let arr = [];
              for (let j = 0; j < response.data.list.length; j++) {
                arr.push(response.data.list[j]);
              }
              let headTab = JSON.parse(response.data.list[0].idenmeta);
              let headArr = [];
              let headCount = 5;
              Object.keys(headTab).forEach(function(key) {
                if (headCount > 0) {
                  headArr.push({ key: key, value: headTab[key] });
                  headCount--;
                }
              });
              this.currentMacroData.push({
                name: this.macroDataList[i].name,
                total: response.data.totalCount,
                type: response.data.list[0].type,
                tableBar: headArr,
                dataList: arr,
                id: this.macroDataList[i].id
              });
              this.loadMacro = false;
            }else{
              this.loadMacro = false;
            }
          })
          .catch(error => {
            console.log(error);
          });
      }
    },
    searchMicroData(report){
      this.drawer = false
      this.idenName = []
      this.report = report
      this.loadMicro = true;
      this.microCurrentRecportType = report.index;
      this.currentMicroData = [];
      let aliasName = report.aliasName?report.aliasName:""
      // aliasName.push()
      for (let i = 0; i < this.microDataList.length; i++) {
        let req = {
          key: this.hotKey,
          level: this.microDataList[i].id,
          aliasName:aliasName,
          microSearchList:"",
          isAll:report.name=="全部"?true:false,
          current: 1,
          size: 6,
          reportType: report.index == "0" ? "" : report.index
        };
        searchAPI
          .searchQueryKey(req, this.microDataList[i].id, "micro")
          .then(response => {
            if (response.data && response.data.list) {
              let arr = [];
              for (let j = 0; j < response.data.list.length; j++) {
                arr.push(response.data.list[j].micro);
              }
              let headTab = JSON.parse(response.data.list[0].idenmeta);
              let headArr = [];
              let headCount = 5;
              Object.keys(headTab).forEach(function(key) {
                if (headCount > 0) {
                  headArr.push({ key: key, value: headTab[key] });
                  headCount--;
                }
              });
              this.currentMicroData.push({
                name:this.microDataList[i].name,
                total: response.data.totalCount,
                type: response.data.list[0].type,
                tableBar: headArr,
                dataList: arr,
                id: this.microDataList[i].id
              });
              this.loadMicro = false;
            }else{
              this.loadMicro = false;
            }
          })
          .catch(error => {
            this.loadMicro = false;
            console.log(error);
          });
      }    
    }
  }
};
</script>

<style lang="scss" scoped>
@import "./../../../assets/css/rule.scss";
//这是自定义loading区域的样式，当然，你可以随意修改，我这个是仿照ElementUI的样式进行设置的
@import '../../../../static/tree/newztreeStyle.css';
.search_result_page{
  background:rgba(247,247,247,1);
  height: auto;
  min-height: 100%;
}
.search_header {
  display: inline-block;
  background:rgba(29,156,183,1);
  height: 60px;
  padding: 0;
  width: 100%;
  .login_btn {
    display: inline-block;
    float: right;
    width: auto;
    margin-right: 26px;
  }
  p {
    margin: 0 10px;
    cursor: pointer;
    color:$fontColorLimit;
    font-size: $fontSize;
    line-height: 60px;
    float: left;
  }
  p.goout:hover,p.gohome:hover{
    color:$fontColorW;
  }
}
.search_contain {
  margin-left: 31px;
  margin-top: 12px;
  width: auto;
  display: inline-block;
}
.logo {
  display: flex;
  align-items: flex-end;
  .logo_img {
    width: 40px;
    height: 40px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    img {
      width: 100%;
    }
  }
  p {
    font-weight: 400;
    font-style: normal;
    font-size: $fontSizeNav;
    color: $fontColorW;
    font-family: Microsoft YaHei;
    float: left;
    line-height: 2.5;
    margin: 0;
  }
}
.dataContain{
  min-height: 400px;
  position: relative;
}
.search_input {
  width: 640px;
  position: relative;
  margin-left: 20px;
  #searchInput{
    height:36px;
    background:none;
    border:1px solid rgba(255,255,255,0.3);
    border-radius:4px 0px 0px 4px;
    color:rgba(255,255,255,0.6)
  }
  #searchBtn {
    position: absolute;
    right: 0;
    top: 0;
    width: 100px;
    height: 36px;
    background: rgba(255,255,255,1);
    border-radius: 0px 2px 2px 0px;
    color: #1D9CB7;
    font-size: $fontSize;
  }
}
.search_container {
  padding: 0;
}
.microData {
  margin-top: 20px;
  display: inline-block;
  width: 100%;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  .microTableContainer {
    padding-left: 35px;
    display: inline-block;
    .el-table{
      margin: 25px 0 10px 0;
    }
    .dataName{
      margin-top: 0;
      height: 32px;
    }
    .operation{
      float: right;
      .dataName{
        height: 32px;
        border: 1px solid $fontColorActive;
        border-radius: 4px;
        padding: 0 10px;
        font-size: $fontSize;
        color:$fontColorActive;
        box-sizing: border-box;
        line-height: 32px;
      }
      .viewOnMap{
        background: $fontColorActive;
        border-radius: 4px;
        color: $fontColorW;
      }
    }
  }
}
.dataName {
  display: inline-block;
  font-size: $fontSize;
  border-radius: 6px;
  padding: 2px 4px;
  margin-top: 10px;
  span {
    color: $fontColorActive;
    font-weight: bold;
  }
}
.operation {
  display: flex;
  align-items: center;
  p {
    font-size: 12px;
    margin-right: 10px;
    cursor: pointer;
  }
}
.openDialog {
  max-height: 400px;
  overflow-x: auto;
  overflow-y: auto;
}
.dataTitle {
  min-width: 50px;
}
.dataPage {
  margin-top: 20px;
  margin-left: 20px;
}
.searchNav {
  display: flex;
  align-items: center;
  background: rgba(12,71,100,1);
  padding:0 35px;
  height: 37px;
  box-shadow: 1px 1px 3px #909399;
  p {
    margin-right: 10px;
    cursor: pointer;
    color:$fontColorLimit;
    line-height: 37px;
    font-size: $fontSize;
    padding: 0 10px;
  }
  .check {
    background: rgba(16,112,137,0.5);
    color:$fontColorW;
  }
}
.search_hot {
  position: absolute;
  max-height: 300px;
  overflow-x: hidden;
  overflow-y: auto;
  width: 100%;
  box-sizing: border-box;
  padding: 20px;
  background:rgba(29,156,183,1);
  top: 45px;
  box-shadow: 0px 0px 27px -16px;
  z-index: 999;
  p {
    box-sizing: border-box;
    cursor: pointer;
    width:100%;
    font-size: $fontSize;
    padding: 0px 5px;
    cursor: pointer;
    line-height: 2;
  }
  p:hover{
    background:rgba(255,138,61,0.7);
  }
}
.leftBarNav {
  width: auto;
  background: #eeeeee;
  border-radius: 6px;
  box-sizing: border-box;
  padding: 10px;
  display: inline-block;
  .currentRecport,p:hover{
    color: $fontColorActive;
  }
  p {
    padding: 6px 0;
    text-align: center;
    cursor: pointer;
    float: left;
    margin: 0;
    padding: 0 12px;
  }
}
.currentRecport {
  color: #409eff;
}
.search_result{
  .microData{
    margin-top: 22px;
  }
}
.leftBar {
  width: 100%;
  float: left;
  display: inline-block;
  padding-left: 35px;
  box-sizing: border-box;
  .icon{
    width:4px;
    height:20px;
    background:rgba(29,156,183,1);
    float: left;
  }
  .dataName{
    margin-top: 0;
    float: left;
    font-size: $fontSizeNav;
    font-weight:400;
    color:rgba(34,34,34,1);
    background: none;
    margin-left: 5px;
    padding: 0;
  }
}
.search_hot p:hover {
  background: #eeeeee;
}
.drawer_btn{
  position: absolute;
  top: 86px;
  cursor: pointer;
  z-index: 99;
  p{
    width: 16px;
    padding: 12px;
    text-align: center;
    color: #fff;
    float:right;
    background: #1d9cb7;
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
    border-left:1px solid #61bacd;
  }
  .el-tree{
    background: #1d9cb7;
    color:#fff;
    padding:10px;
  }
}
.search_drawer{
  float:left;
  box-shadow: 1px 1px 2px #909399;
}
.search_drawer /deep/ .el-tree-node__expand-icon.is-leaf {
  color:#fff;
}
.search_drawer /deep/.el-tree-node:focus > .el-tree-node__content {
  color:#fff;
  background:#0c4764;
}
.search_drawer /deep/.el-tree-node:hover > .el-tree-node__content {
  color:#fff;
  background:#0c4764;
}
.search_drawer /deep/ .el-tree-node__content{
  border-radius: 2px;
  padding-right:10px;
}
.mircoTree /deep/ .el-tree-node>.el-tree-node__content .el-checkbox{
  display:none;
}
.mircoTree /deep/ .el-tree-node>.el-tree-node__content>.el-tree-node>.el-tree-node__content .el-checkbox{
  display:none;
}
.mircoTree /deep/ .el-tree-node>.el-tree-node__children>.el-tree-node>.el-tree-node__children{
  .is-leaf.el-tree-node__expand-icon.el-icon-caret-right{
    display:none;
  }
  .el-tree-node__expand-icon.el-icon-caret-right{
    display:none;
  }
  .el-checkbox{
    display:inline-block;
  }
}
#treeDemo{
  background:#1d9cb7;
  color:#fff;
  max-height:600px;
  overflow-y: scroll;
  z-index: 99;
}
.mircoTree /deep/ .el-tree-node>.el-tree-node__children>.el-tree-node>.el-tree-node__children .el-tree-node{
  .is-leaf.el-tree-node__expand-icon.el-icon-caret-right{
    display:none;
  }
  .el-tree-node__expand-icon.el-icon-caret-right{
    display:none;
  }
  .el-checkbox{
    display:inline-block;
  }
}
</style>
<style lang="scss" >
@import "./../../../assets/css/rule.scss";
.search_result_page{
  font-family: Microsoft YaHei;
  .search_input {
    #searchInput{
      height:36px;
      background:none;
      border:1px solid rgba(255,255,255,0.3);
      border-radius:4px 0px 0px 4px;
      color:rgba(255,255,255,0.6)
    }
    #searchBtn {
      position: absolute;
      right: 0;
      top: 0;
      width: 100px;
      height: 36px;
      background: rgba(255,255,255,1);
      border-radius: 0 3px 3px 0;
      color: #1D9CB7;
      font-size: $fontSize;
      border: 1px solid #f7f4f4;
    }
  }
  .search_hot {
    position: absolute;
    max-height: 300px;
    overflow-x: hidden;
    overflow-y: auto;
    width: 100%;
    box-sizing: border-box;
    padding: 20px;
    background:rgba(29,156,183,1);
    top: 45px;
    box-shadow: 0px 0px 27px -16px;
    z-index: 999;
    p {
      box-sizing: border-box;
      padding: 5px;
      cursor: pointer;
    }
    p:hover{
      background:rgba(255,138,61,0.7);
    }
  }
  .el-table{
    .el-table__header-wrapper{
      background:rgba(239,242,243,1);
      tr{
        background-color: #fff0!important;
        th{
          color:rgba(51,51,51,1);
        }
      }
    }
    th{
       background:rgba(239,242,243,1);
    }

  }
}
.viewAllDialog{
  width: auto;
  min-width: 800px;
  max-width: 1000PX;
  .el-dialog__header{
    .el-dialog__headerbtn{
      .el-dialog__close{

      }
    }
    .el-dialog__headerbtn:focus .el-dialog__close, .el-dialog__headerbtn:hover .el-dialog__close{
      color: $fontColorActive;
    }
  }
  .dataPage{
    .el-pager{
      li:not(.disabled):hover{
        color: $fontColorActive;
      }
      li:not(.disabled).active{
        background-color: $fontColorActive;
      }
      li:not(.disabled).active:hover{
        color:#ffffff;
        cursor: pointer;
      }
    }
    .el-pagination__sizes{
      .el-select .el-input.is-focus .el-input__inner,.el-input .el-input__inner:hover,.el-select .el-input__inner:focus{
        border-color: $fontColorActive;
      }
    }
  }
}
.loginOutConfirm{
  .el-message-box__btns{
    .el-button:focus, .el-button:hover{
      color: $fontColorActive;
      border-color: rgba(29,156,183,0.2);
      background-color: #ecf5ff;
    }
    .el-button--primary,.el-button--primary:focus, .el-button--primary:hover{
      background:$fontColorActive;
      border:1px solid $fontColorActive;
      color: $fontColorW;
    }
  }
}
.paginationSelectBox{
  .el-select-dropdown__item.selected{
    color: $fontColorActive;
  }
}
</style>
